<template>
  <Card>
    <Tabs>
      <TabPane label="一卡通收入统计">
        <div>
          <Row>
            <Col span="24">
            <Card>
              <div style="position:relative;">
                <iframe
                  :height="iframeHeight"
                  :src="url1"
                  class="iframe"
                  frameborder="0"
                  scrolling="auto"
                  width="100%"></iframe>
              </div>
            </Card>
            </Col>
          </Row>
        </div>
      </TabPane>
      <TabPane label="一卡通收入台账">
        <div>
          <Row>
            <Col span="24">
            <Card>
              <div style="position:relative;">
                <iframe
                  :height="iframeHeight"
                  :src="url2"
                  class="iframe"
                  frameborder="0"
                  scrolling="auto"
                  width="100%"></iframe>
              </div>
            </Card>
            </Col>
          </Row>
        </div>
      </TabPane>
      <TabPane label="一卡通卡分类统计">
        <div>
          <Row>
            <Col span="24">
            <Card>
              <div style="position:relative;">
                <iframe
                  :height="iframeHeight"
                  :src="url3"
                  class="iframe"
                  frameborder="0"
                  scrolling="auto"
                  width="100%"></iframe>
              </div>
            </Card>
            </Col>
          </Row>
        </div>
      </TabPane>
    </Tabs>
  </Card>
</template>
<script>
export default {
  name: 'Monitor',
  data() {
    return {
      loading: false,
      url1:
        'http://116.63.90.219:8075/webroot/decision/view/report?viewlet=%25E5%2585%25AC%25E4%25BA%25A4%25E6%258A%25A5%25E8%25A1%25A8%252F%25E4%25B8%2580%25E5%258D%25A1%25E9%2580%259A%25E6%2594%25B6%25E5%2585%25A5%25E7%25BB%259F%25E8%25AE%25A1.cpt',
      url2:
        'http://116.63.90.219:8075/webroot/decision/view/report?viewlet=%25E5%2585%25AC%25E4%25BA%25A4%25E6%258A%25A5%25E8%25A1%25A8%252F%25E4%25B8%2580%25E5%258D%25A1%25E9%2580%259A%25E6%2594%25B6%25E5%2585%25A5%25E5%258F%25B0%25E8%25B4%25A6.cpt',
      url3: 'http://116.63.90.219:8075/webroot/decision/view/report?viewlet=%25E5%2585%25AC%25E4%25BA%25A4%25E6%258A%25A5%25E8%25A1%25A8%252F%25E4%25B8%2580%25E5%258D%25A1%25E9%2580%259A%25E5%258D%25A1%25E7%25B1%25BB%25E5%259E%258B%25E7%25BB%259F%25E8%25AE%25A1.cpt',
      iframeHeight: 0,
    }
  },
  computed: {},
  watch: {
    $route() {
      this.initUrl()
    },
  },
  mounted() {
    this.initUrl()
  },
  methods: {
    initUrl() {
      this.iframeHeight = this.$parent.$el.clientHeight - 255
      const iframe = document.getElementsByClassName('iframe')
      if (iframe.attachEvent) {
        iframe.attachEvent('onload', function () {
        })
      } else {
        iframe.onload = function () {
        }
      }

    },
  },
}
</script>
